<template>
  <div class="pagestyle" style="display: flex;">
    <div v-if="fromIndexpointId" style="width: 382px;">
      <querybox :queryList="state.options.queryList.querys" @query="query"></querybox>
    </div>
    <topbottomCom :optionsquery="1">
      <template v-slot:dragTopSlot>
        <list_controller :showCaozuo="state.showCaozuo" @query="query" ref="zujianname" :options="state.options"
          @cellClickEvent="cellClickEvent">
          <template v-slot:opraCurdBtnAll>
            <span :class="state.listBtnType == 1 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(1)">
              <svg-icon :class="state.listBtnType == 1 ? 'active' : ''" class-name="search-icon" icon-class="qiehuan" />
              实时馈电异常
            </span>
            <span :class="state.listBtnType == 7 ? 'listInfoBtn active' : 'listInfoBtn'" @click="listInfoBtnClick(7)">
              <svg-icon :class="state.listBtnType == 7 ? 'active' : ''" class-name="search-icon"
                icon-class="tongjishuju" />
              统计数据
            </span>
          </template>
          <template v-slot:selectNamelist> 历史馈电异常 </template>
        </list_controller>
      </template>
      <template v-slot:dragBottomSlot>
        <list_controller ref="zujiannametwo" :options="state.optionstwo" @pagechange="pagechange"
          :descQuery="state.descObj">
          <template v-slot:opraCurdBtnlist="row">
            <span>
              <el-button class="tableFontSize" type="primary" link size="small" @click="lookBtn(row.row.row)">填写分析
              </el-button>
              <el-button class="tableFontSize" type="primary" link size="small" @click="editBtn(row.row.row)"
                v-if="row.row.row.templateDto != null">查看分析</el-button>
            </span>
          </template>
          <template v-slot:opraCurdBtnAll>
            <span :class="state.listBtnType == 2 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(2)">
              <svg-icon :class="state.listBtnType == 2 ? 'active' : ''" class-name="search-icon"
                icon-class="quxian-g77hanc6" />
              查看曲线
            </span>
          </template>
          <template v-slot:selectNamelist> 详细信息(总计) </template>
        </list_controller>
      </template>
    </topbottomCom>
    <!--  -->
    <ayasdataCom style="width: 21.5%" v-if="state.listBtnType == 7" @close="close">
      <template v-slot:ayasContent>
        <ayasCardCom title="馈电异常区域统计" :list="state.ayasObjData.oneList.length">
          <template v-slot:operatecontent>
            <div class="ayasTableListBox">
              <div class="tableTop" style="display: flex;justify-content: space-between;padding: 6px 0;">
                <span></span><span>区域名称</span><span>次数</span><span>时长</span>
              </div>
              <div style="height: 300px;overflow-y: auto;">
                <div class="tableBottom" style="padding: 6px 0;display: flex;justify-content: space-between;"
                  v-for="(item, index) in state.ayasObjData.oneList">
                  <span><em :style="{
                    backgroundColor: index == 0 ? 'rgba(255, 85, 85, 1)' : index == 1 ? 'rgba(255, 163, 71, 1)' :
                      index == 2 ? 'rgba(252, 205, 4, 1)' : '',
                  }"><i :style="{ color: index == 0 || index == 1 || index == 2 ? '#fff' : '' }">{{ index + 1 }}</i></em></span><span>{{
                    item.areaName }}</span><span>{{ item.feedNum }}</span><span>{{ item.feedAccumulationTime }}</span>
                </div>
              </div>
            </div>
          </template>
        </ayasCardCom>
        <ayasCardCom title="馈电异常源统计" :list="state.ayasObjData.twoList.length">
          <template v-slot:operatecontent>
            <div id="chartBox" style="height: 200px;">
            </div>
          </template>
        </ayasCardCom>
        <ayasCardCom title="馈电异常趋势" :list="state.ayasObjData.fourList.length">
          <template v-slot:operatecontent>
            <div id="chartBoxt" style="height: 200px;">
            </div>
          </template>
        </ayasCardCom>
      </template>
    </ayasdataCom>
    <!-- 填写分析 -->
    <fillayaCom :fillayaComShow="state.fillayaComShow" @submitFormfillayaCom="submitFormfillayaCom" :status="'D'">
    </fillayaCom>
    <!-- 查看曲线 -->
    <chartCom :openChart="state.showChart" :data="state.chartData" @closeChart="closeChart">
    </chartCom>
    <!-- 查看分析 -->
    <ayadetailCom :detailsList="state.detailsList" :detailsShow="state.detailsShow"></ayadetailCom>
  </div>
</template>
<script setup>
import querybox from "@/components/commonCom/querybox"; //用于首页抽屉查询处理
import topbottomCom from "./listCom/topbottomCom.vue";
import list_controller from "@/components/commonCom/list_controller";
import fillayaCom from "./listCom/fillayaCom.vue";
import ayadetailCom from "./listCom/ayadetailCom.vue";
import chartCom from "./listCom/chartCom.vue";
import {
  computed,
  nextTick,
  onMounted,
  reactive
} from "vue";
import {
  table_headers
} from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import ayasdataCom from "./listCom/ayasdataCom.vue";
import ayasCardCom from "./listCom/ayasCardCom.vue";
import * as echarts from "echarts";
import {
  ElMessage,
  ElMessageBox,
  ElNotification
} from "element-plus";
import dayjs from "dayjs";
import {
  searchareaTree
} from "@/api/config";
const {
  proxy
} = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
let previewHttps =
  import.meta.env.VITE_APP_HTTP;
const upload = ref(null);
// 首页查询抽屉传值
const props = defineProps({
  fromIndexpointId: Object
})
let state = reactive({
  ayasObjData: {
    rightayasSelType: 'S',
    oneList: [],
    twoList: [],
    twoObj: {},
    threeSelType: 'S',
    threeList: [],
    fourList: []
  },
  detailsShow: false,
  detailsList: [],
  tempList: [],
  fillayaComShow: false, //控制填写分析抽屉显示
  listBtnType: undefined,
  options: {
    tableheads: computed(() => table_headers.hisPointFeed),
    queryList: {
      queryTitle: '选择测点',
      autoSearch: props.fromIndexpointId ? true : undefined,
      querys: [{
        fieldsearch: "conditionType",
        field: "conditionType",
        title: "查询方式",
        type: "radiospecial",
        binddata: 1,
        options: [{
          label: "时间查询",
          value: 1,
        },
        {
          label: "班次查询",
          value: 2,
        },
        ],
      },
      {
        field: ["feedStartTime", "feedEndTime"],
        fieldsearch: ["feedStartTime", "feedEndTime"],
        title: "时间范围",
        col: 12,
        type: "datetimestartEnd",
        binddata: [dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format(
          'YYYY-MM-DD HH:mm:ss')],
        typespecial: 2,
        show: false,
      },
      {
        field: "datetime",
        fieldsearch: "datetime",
        title: "日期",
        type: "datetime",
        binddata: dayjs().format('YYYY-MM-DD'),
        typespecial: 1,
        show: true,
      },
      {
        fieldsearch: "banci",
        field: "banci",
        title: "班次选择",
        type: "selectspecial",
        binddata: "",
        options: [],
        typespecial: 1,
        show: true,
      },
      {
        field: "area",
        title: "所在区域",
        type: "cascaderRadionarmal",
        binddata: "",
        options: [],
        props: {
          children: "childList",
          value: "areaName",
          label: "areaName",
          checkStrictly: true,
          emitPath: false,
        },
      },
      {
        field: "condition",
        title: "测点类型",
        type: "cascaderRadio",
        binddata: "",
        options: [],
        props: {
          children: "children",
          value: "code",
          label: "name",
          checkStrictly: true,
          emitPath: false,
        },
      },
      {
        fieldsearch: ["sensorName", "pointId", "place"],
        field: ["sensorName", "pointId", "place"],
        title: "选择测点",
        type: "cascaderRadioSpecial",
        binddata: "",
        options: [],
        props: {
          children: "children",
          value: "commonField",
          label: "commonField",
          checkStrictly: true,
          emitPath: false,
        },
      },
      {
        field: "isShowLocal",
        title: "只显示当前测点",
        type: "elcheckbox",
        binddata: false,
      }
      ],
    },
    dataUrl: "/hisPointFeed/listHisFeedPoints",
  },
  optionstwo: {
    queryList: {
      detailListSear: true,
      autoSearch: true,
      querys: [],
    },
    tableheads: computed(() => table_headers.hisPointDetailFeed),
    dataUrl: "/hisPointFeed/listHisFeedDetailPoints",
  },
  editId: undefined,
  banciList: [],
  showCaozuo: true,
  data: {},
  areaObj: {
    flag: "hisPointFeed",
    isShowLocal: false
  },
  descObj: {},
  showChart: false,
  chartData: {},
});
// 统计数据接口

let chartBox, chartBoxt

function setC1(xdata, data) {
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      top: 30,
      bottom: 25,
      left: 40,
      right: 0
    },
    xAxis: [{
      type: "category",
      axisLine: {
        lineStyle: {
          color: "rgba(62, 70, 79, 1)",
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: "rgba(62, 70, 79, 1)",
        fontSize: 18,
      },
      data: xdata,
    }],
    yAxis: [{
      type: "value",
      name: '次数',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: "rgba(62, 70, 79, 1)",
      },
      splitArea: {
        show: false,
      },
    },],
    series: [{
      type: "bar",
      barMaxWidth: 35,
      barGap: "10%",
      itemStyle: {
        normal: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: "rgba(81, 172, 232, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(81, 172, 232, .2)", // 100% 处的颜色
            },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      data: data,
    }],
  };
  chartBox.setOption(option, true)
}

function getlistAlarmInfoStatistic() {
  axios.post('/hisPointFeed/attainFeedInfoStatistic', {
    feedStartTime: state.options.queryList.querys[1].binddata[0],
    feedEndTime: state.options.queryList.querys[1].binddata[0],
    flag: "B"
  }).then(res => {
    state.ayasObjData.twoList = res.data
    let xdata = res.data.map(item => {
      return item.sensorName + '\n' + item.pointId
    })
    let data = res.data.map(item => {
      return item.feedNum
    })

    nextTick(() => {
      chartBox = echarts.init(document.getElementById("chartBox"));
      setC1(xdata, data)
    })
  })
}

function setC2(xdata, data) {
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      top: 30,
      bottom: 25,
      left: 40,
      right: 0
    },
    xAxis: [{
      type: "category",
      axisLine: {
        lineStyle: {
          color: "rgba(62, 70, 79, 1)",
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: "rgba(62, 70, 79, 1)",
        fontSize: 18,
      },
      data: xdata,
    }],
    yAxis: [{
      type: "value",
      name: '次数',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: "rgba(62, 70, 79, 1)",
      },
      splitArea: {
        show: false,
      },
    },],
    series: [{
      type: "line",
      itemStyle: {
        normal: {
          color: 'rgba(68, 170, 255, 1)'
        },
      },
      data: data,
    }],
  };
  chartBoxt.setOption(option, true)
}

function getattainRealAreaInfo2() {
  axios.post('/hisPointFeed/attainFeedInfoStatistic', {
    feedStartTime: state.options.queryList.querys[1].binddata[0],
    feedEndTime: state.options.queryList.querys[1].binddata[0],
    flag: "C"
  }).then(res => {
    state.ayasObjData.fourList = Object.keys(res.data.feedTrend).map(key => {
      return {
        label: key,
        value: res.data.feedTrend[key]
      }
    })
    let xdata = state.ayasObjData.fourList.map(item => {
      return item.label
    })
    let data = state.ayasObjData.fourList.map(item => {
      return item.value
    })
    nextTick(() => {
      chartBoxt = echarts.init(document.getElementById("chartBoxt"));
      setC2(xdata, data)
    })
  })
}

function getattainRealAreaInfo1() {
  axios.post('/hisPointFeed/attainFeedInfoStatistic', {
    feedStartTime: state.options.queryList.querys[1].binddata[0],
    feedEndTime: state.options.queryList.querys[1].binddata[0],
    flag: "A"
  }).then(res => {
    state.ayasObjData.oneList = res.data
  })
}

// 填写分析抽屉
function lookBtn(row) {
  state.editId = row.id;
  state.fillayaComShow = dayjs().unix();
}
// 提交填写分析
function submitFormfillayaCom(data) {
  let dataObj = {};
  dataObj.id = state.editId;
  dataObj.templateDto = data;
  if (data) {
    axios.post("/hisPointFeed/modifyRealPointTemplate", dataObj).then((res) => {
      proxy.$modal.msgSuccess(res.msg);
      state.fillayaComShow = false;
      proxy.$refs.zujiannametwo.getData({
        ...state.descObj
      });
    });
  } else {
    state.fillayaComShow = false;
  }
}
// 列表按钮
function listInfoBtnClick(type) {
  state.listBtnType = type;
  if (type == 1) {
    goPage()
  }
  if (type == 2) {
    if (store.records.length == 0 || store.records.length > 1) {
      ElMessage.error('请选择一个测点')
      state.listBtnType = undefined;
      return
    } else {
      state.showChart = !state.showChart
      state.chartData = {
        pointIds: [store.records[0].pointId],
        queryStartTime: store.records[0].feedStartTime,
        queryEndTime: store.records[0].feedEndTime,
      }
    }
  }
  if (type == 7) {
    getlistAlarmInfoStatistic()
    getattainRealAreaInfo2()
    getattainRealAreaInfo1()
  }
}
// 关闭统计数据
const close = () => {
  state.listBtnType = undefined
}
// 编辑按钮
function editBtn(row) {
  if (row.templateDto != null) {
    state.detailsShow = dayjs().unix();
  }
  state.detailsList = row.templateDto;
}

function cellClickEvent(row) {
  store.records = []
  state.data = row
  state.descObj.pointId = row.pointId
  proxy.$refs.zujiannametwo.getData({
    ...state.descObj
  });
}

function pagechange() {
  proxy.$refs.zujiannametwo.getData({
    ...state.descObj
  });
}

function query(type) {
  if (type.item && (type.item.field == "isShowLocal"
    || type.item.type == 'datetimestartEnd')) {
    state.areaObj.isShowLocal = type.val
    getconditionList(state.areaObj)
  }
  if (type == 2) {
    proxy.$refs.zujiannametwo.state.tabledata = []
    getconditionList({})
  }
  if (type.type == 4) {
    state.options.queryList.querys.forEach((item) => {
      if (item.type == "cascaderRadioSpecial") {
        item.binddata = undefined
      }
      if (item.field == "condition") {
        state.areaObj['condition'] = type.val
        item.binddata = type.val
      }
    });
    getconditionList(state.areaObj);
  }
  if (type.type == 44) {
    state.options.queryList.querys.forEach((item) => {
      if (item.type == 'cascaderRadioSpecial') {
        if (item.binddata == '' || !item.binddata) {
          state.areaObj['areaName'] = type.val1
          getconditionList(state.areaObj);
        }
      }
    })
  }
  if (type.type == 5 && type.item.type != 'datetimestartEnd') {
    let dataObj = {
      dateSuffix: undefined,
      classInfo: {},
    };
    state.options.queryList.querys.forEach((item) => {
      if (type.val1) {
        dataObj.dateSuffix = type.val1
        if (item.fieldsearch == "banci") {
          state.banciList.forEach((itemsub) => {
            if (itemsub.id == item.binddata) {
              dataObj.classInfo = itemsub;
              dataObj.typeLabel = 2
              banciList(dataObj);
            }
          });
        }
      } else {
        if (item.fieldsearch == "datetime") {
          dataObj.dateSuffix = item.binddata;
        }
      }
      if (item.fieldsearch == "banci") {
        state.banciList.forEach((itemsub) => {
          if (type.val == 0) {
            type.val = state.banciList[0].id
          }
          if (itemsub.id == type.val) {
            dataObj.classInfo = itemsub;
            dataObj.typeLabel = 2
            banciList(dataObj);
          }
        });
      }
    });
  }
  if (type.type == 'topConnectBom') {
    state.descObj = type.data
    proxy.$refs.zujiannametwo.state.tabledata = []
  }
  if (type == 1 && props.fromIndexpointId) {
    proxy.$refs.zujianname.getData()
  }
}

function getbanciList() {
  axios.post("/class/info/searchAll", {}).then((res) => {
    state.banciList = res.data.list;
    state.options.queryList.querys.forEach((item) => {
      if (item.fieldsearch == "banci") {
        item.options = res.data.list.map((item) => {
          return {
            label: item.className,
            value: item.id,
          };
        });
        item.binddata = item.options[0].value
      }
    });
  });
}
getbanciList();

function banciList(dataObj) {
  axios.post("/hisPointFeed/handleClassInfo", dataObj).then((res) => {
    state.options.queryList.querys.forEach((item) => {
      if (dataObj.typeLabel != 2 || state.options.queryList.querys[0].binddata == 2) {
        if (item.type == "datetimestartEnd") {
          item.binddata = [res.data.feedStartTime, res.data.feedEndTime];
        }
      }
    });
  });
}

function getSelList() {
  axios.post("/hisPointFeed/listAllNames", {
    flag: false
  }).then((res) => {
    state.options.queryList.querys.forEach((item) => {
      if (item.field == "condition") {
        item.options = res.data;
      }
    });
  });
  searchareaTree().then((res) => {
    state.options.queryList.querys.forEach((item) => {
      if (item.field == "area") {
        item.options = res.data;
      }
    });
  });
}

function getconditionList(dataObj) {
  state.options.queryList.querys.forEach((item) => {
    if (item.type == "datetimestartEnd") {
      dataObj.startTime = dayjs(item.binddata[0]).format('YYYY-MM-DD HH:mm:ss 000')
      dataObj.endTime = dayjs(item.binddata[1]).format('YYYY-MM-DD HH:mm:ss 000')
    }
  });
  axios
    .post("/hisPointFeed/conditionList", dataObj)
    .then((res) => {
      state.options.queryList.querys.forEach((item) => {
        if (item.type == "cascaderRadioSpecial") {
          item.options = res.data;
        }
      });
    });
}
getconditionList(state.areaObj)
getSelList();
// 跳转实时馈电异常页面
const goPage = () => {
  router.push({
    name: "Lb_realFeedbackList"
  })
}
// 关闭曲线
const closeChart = () => {
  state.listBtnType = undefined
  state.showChart = false
}
onMounted(() => {
  if (props.fromIndexpointId) {
    state.options.queryList.querys.forEach((item) => {
      item.col = 24
      if (item.type == "cascaderRadioSpecial") {
        item.binddata = props.fromIndexpointId.pointId
        item.binddata1 = [props.fromIndexpointId.sensorName, props.fromIndexpointId.pointId, props
          .fromIndexpointId.place
        ]
        proxy.$refs['zujianname'].getData()
      }
    });
  }
});
</script>
<style lang="scss" scoped>
.xiazai {
  position: absolute;
  top: 42px;
  right: 110px;
  width: 120px;
  height: 64px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  z-index: 99;

  .item {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .item:hover {
    background-color: #ececec;
  }
}

::v-deep .el-drawer {
  .querycss {
    .fsc {
      &:nth-child(2) {
        display: none;
      }
    }
  }

  .table_box {
    .fsc {
      display: none;
    }
  }
}
</style>